<template>
	<el-container direction="vertical" style="height: 100%">
		<el-affix :offset="0">
			<el-row :gutter="1" class="btn-row">
				<el-button size="large" :icon="DocumentAdd">新增</el-button>
				<el-button size="large" :icon="Refresh">刷新</el-button>
				<el-button size="large" :icon="Promotion">保存</el-button>
				<el-button size="large" :icon="FolderChecked">审核(F8)</el-button>
				<el-button size="large">退审</el-button>
				<el-button size="large" :icon="Printer">预览</el-button>
				<el-button size="large" :icon="Printer">生成PDF</el-button>
				<MkButtonMore BtnText="打印">
					<el-dropdown-item command="modify">打印报告</el-dropdown-item>
					<el-dropdown-item command="modify">打印条码</el-dropdown-item>
				</MkButtonMore>
				<el-button size="large" :icon="Monitor">360视图</el-button>
				<div class="formUserCss">
					<MkForm :col="2" formId="formUser">
						<MkSelect label="检验者" v-model="formUser.inspectUserId" />
						<MkSelect label="审核者" v-model="formUser.auditUserId" />
					</MkForm>
				</div>
			</el-row>
		</el-affix>
		<el-main class="main">
			<div class="main-div">
				<InpSpecimenList class="main-left" />
				<div class="dividebox" ref="divide1Ref" v-resize="['.main-left', '.main-center']"></div>
				<InpSpecimenPatient class="main-center" />
			</div>
			<div class="dividebox" ref="divide2Ref" v-resize="['.main-div', '.main-right']"></div>
			<InpSpecimenResult class="main-right" />
		</el-main>
	</el-container>
</template>
<script lang="ts" setup>
import { DocumentAdd, DocumentDelete, Refresh, Picture, Monitor, Printer, PriceTag, TrendCharts, Bell, FolderChecked, CirclePlusFilled, Promotion } from '@element-plus/icons-vue';
import InpSpecimenList from './components/InpSpecimenList.vue';
import InpSpecimenPatient from './components/InpSpecimenPatient.vue';
import InpSpecimenResult from './components/InpSpecimenResult.vue';

const formUser = ref({
	inspectUserId: undefined,
	auditUserId: undefined,
});
</script>
<style lang="scss" scoped>
.btn-row {
	padding: 0 1rem;
	display: flex;

	:deep(button) {
		height: 30px;
		padding: 0 0.5rem;
		margin-left: 0.2rem;
		margin-top: 0.2rem;
	}
}

.main {
	// width: 110vw;
	// width: 2000px;
	width: 100%;
	margin: 10px 5px;
	// 有dividebox的元素不可以设置padding，否则dividebox会将元素的高度撑开
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: nowrap;

	.main-div {
		display: flex;
		flex-direction: row;
	}

	.main-left {
		width: 420px;
		overflow-x: auto;
		resize: horizontal;
	}

	.main-center {
		// max-width: 310px !important;
		width: 310px !important;
	}

	.main-right {
		overflow-x: auto;
		resize: horizontal;
	}
}

.formUserCss {
	padding-top: 5px;
}
</style>
